/*
 * @Descripttion: 
 * @Author: chunhu-yin
 * @Date: 2021-03-12 14:33:16
 * @LastEditTime: 2021-03-30 20:34:47
 */
import React from 'react'
import { Trans } from 'react-i18next'
import { Image, Button, message } from 'antd'
import './../../style/index.css'
import Http from './../../request/index'
import marker1 from '@/assets/map/mass00.png'
import './index.css'
const AMap = window.AMap;
let map = null;
class index extends React.Component {
    async componentWillMount() {
        let data = {
            status: 0,
        }
        var res = await Http.get('/tour/maporder/mapMarkers/get', data)
        if (res.code == 200) {
            let data = res.data
            let markerList = []
            // 创建 AMap.Icon 实例：
            var icon = new AMap.Icon({
                size: new AMap.Size(16, 16),
                image: marker1,
                imageSize: new AMap.Size(16, 16),
                imageOffset: new AMap.Pixel(0, 0)
            });
            if (data.length > 0) {
                data.forEach(item => {
                    var marker = new AMap.Marker({
                        position: new AMap.LngLat(item.longitude, item.latitude),
                        offset: new AMap.Pixel(-8, -8),
                        zoom: 13,
                        icon: icon,
                        extData: item
                    });
                    markerList.push(marker)
                    marker.setMap(map)
                    marker.on('mousemove', function (parms) {
                        let data = parms.target.w.extData;
                        var str = ''
                        if (data.visitingTime) {
                            str += '<div class="item">期望上门时间：' + data.visitingTime + '</div>'
                        }
                        if (data.goodsList.length > 0) {
                            str += '<div class="th"><div>商品名称</div><div>商品规格</div></div>'
                            data.goodsList.map(item => {
                                str += '<div class="tr"><div>' + item.name + '</div><div>' + item.weight + '</div></div>'
                            })
                        }

                        marker.setLabel({
                            offset: new AMap.Pixel(10, 10),  //设置文本标注偏移量
                            content: "<div class='info mass_mark_desc_style'>" + str + "</div>", //设置文本标注内容
                            direction: 'right' //设置文本标注方位
                        });
                    })
                    marker.on('mouseout', function (parms) {
                        marker.setLabel(null);
                    })
                });
                map.setFitView(markerList)
            }
        }
    }
    componentDidMount() {
        this.renderMap()
    }
    renderMap() {
        map = new AMap.Map('map', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom: 11, //初始化地图层级
        });
        map.setMapStyle('amap://styles/dark'); // 地图主题颜色
    }
    render() {
        return (
            <div className='container' id='map_cont'>
                <div id="map"></div>
            </div>
        )
    }
}
export default index